class Magnifier {
    constructor() {

        this.sBox = document.querySelector(".small-box");
        this.span = this.sBox.getElementsByTagName("span")[0];
        this.lBox = document.querySelector(".large-box");
        this.lImg = this.lBox.children[0];
        // this.addEvent();
        // // this.init();
        // // console.log(this.sBox)
        // console.log(this.span)
        //     // console.log(this.lBox)
        //     // console.log(this.limg)
        this.addEvent();
    }
    init() {
        this.span.style.width = this.sBox.offsetWidth / (this.lImg.offsetWidth / this.lBox.offsetWidth) + "px";
        this.span.style.height = this.sBox.offsetHeight / (this.lImg.offsetHeight / this.lBox.offsetHeight) + "px";

    }
    addEvent() {
        var that = this;
        // 进入
        this.sBox.onmouseover = function() {
                that.over()
            }
            // 离开
        this.sBox.onmouseout = function() {
                that.out()
            }
            // 移动
        this.sBox.onmousemove = function(eve) {
            var e = eve || window.event;
            that.move(e);
        }
    }
    move(e) {
        var l = e.offsetX - this.span.offsetWidth / 2;
        var t = e.offsetY - this.span.offsetHeight / 2;
        this.span.style.left = l + "px";
        this.span.style.top = t + "px";


        var x = l / (this.sBox.offsetWidth - this.span.offsetWidth);
        var y = t / (this.sBox.offsetHeight - this.span.offsetHeight);

        this.lImg.style.left = (this.lBox.offsetWidth - this.lImg.offsetWidth) * x + "px";
        this.lImg.style.top = (this.lBox.offsetHeight - this.lImg.offsetHeight) * y + "px";
        // console.log(this.span)
        // var l = e.clientX - this.span.offsetWidth;
        // var t = e.clientY - this.span.offsetHeight;
        // this.span.style.left = l + "px";
        // this.span.style.height = t + "px";
        // var x = l / (this.sBox.offsetWidth - this.span.offsetWidth)
        // var y = t / (this.sBox.offseHeight - this.span.offseHeight)
        // this.lImg.style.left = (this.lBox.offsetWidth - this.lImg.offsetWidth) * x + "px"
        // this.lImg.style.top = (this.lBox.offsetHeight - this.lImg.offsetHeight) * y + "px"

    }
    over() {
        // 显示对应元素
        this.span.style.display = "block";
        this.lBox.style.display = "block";

        // 补全布局
        this.init();
    }
    out() {
            // 隐藏对应元素
            this.span.style.display = "none";
            this.lBox.style.display = "none";
        }
        // over() {
        //     this.span.style.display = "block";
        //     this.lBox.style.display = "block";
        //     this.init();
        // }
        // out() {
        //     this.span.style.display = "none";
        //     this.lBox.style.display = "none";
        // }
}


new Magnifier();